import React, { useState, useEffect } from 'react'
const ref = React.createRef();
const xref= React.createRef()
const yref= React.createRef()
window.timer = null; //计时器ID

function stop() {
  console.log('清理函数，仅卸载时执行')
    clearInterval(window.timer); //清空之前的计时器
    window.timer = null;
}
/**
 * 一个可移动的块，该组件每次渲染完成后，始终从0，0坐标在10秒钟内，移动到目标点坐标
 * @param {*} props 
 * props.left，要移动到的目标点横坐标
 * props.top，要移动到的目标点纵坐标
 */
function MovableBlock(props) {
  console.log('渲染了',props)
    useEffect(() => {
      console.log('副作用',props)
        //渲染完成后
        
        if(window.timer){
          clearInterval(window.timer);
        }
        // if(props.left === 0 && props.top === 0){

        // }
        const div = ref.current;
        let curTimes = 0; //当前移动的次数
        const disX = props.left / 1000; //横坐标上每次移动的距离
        const disY = props.top / 1000; //纵坐标上每次移动的距离
        // console.log(disX)
        // console.log(disY)
        window.timer = setInterval(() => {
            curTimes++;//移动次数+1
            const newLeft = curTimes * disX;
            const newTop = curTimes * disY;
            // console.log(newLeft)
            // console.log(newTop)
            div.style.left = newLeft + "px";
            div.style.top = newTop + "px";
            if (curTimes === 1000) {
              clearInterval(window.timer);
            }
        }, 10)
        return stop; //直接使用stop作为清理函数
    },[props.left,props.top])

    return <div ref={ref} style={{
        width: 100,
        height: 100,
        left: 0,
        top: 0,
        position: "fixed",
        background: "#f40"
    }}>

    </div>
}

export default function App() {
    const [point, setPoint] = useState({ x: 0, y: 0 })
    const [visible, setVisible] = useState(true)
    useEffect(() => {
        setTimeout(() => {
              console.log(point)
        }, 5000);
    })
    return (
        <div style={{
            paddingTop: 200
        }}>
            {
                visible && (
                    <div>
                        x: <input ref={xref} type="number"  />
                        y: <input ref={yref} type="number" />
                        
                        <MovableBlock left={point.x} top={point.y} />
                    </div>
                )
            }
          <button onClick={()=>{
            console.log('确定')
                          setPoint({
                            x: parseInt(xref.current.value),
                            y: parseInt(yref.current.value)
                        })
                        }}>
                          确定
                        </button>
            <button onClick={() => {
                setVisible(!visible);
            }}>显示/隐藏</button>

        </div>
    )
}
